<template>
  <view class="order-item-list">
    <order-item
      v-for="item in orders"
      :key="item.orderId"
      :order="item"
    />
    <view
      class="empty-view"
      v-if="!orders.length"
    >
      <image
        src="/static/images/order/empty_orders.png"
        class="empty-image"
      />
      <text class="empty-text">您还没有订单，快去选一杯喜欢的饮品吧~</text>
      <button class="empty-button" @tap="toMenu">去喝一杯</button>
    </view>
    <view
      class="bottom-spacer"
      v-if="orders.length"
    ></view>
  </view>
</template>

<script>
import OrderItem from "../OrderItem/OrderItem.vue"
export default {
  name: "OrderList",
  components: {
    OrderItem
  },
  props: {
    orders: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    toMenu() {
      uni.switchTab({
        url: "/pages/menu/menu"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-item-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-base;
  padding: $uni-spacing-row-base;
}

.bottom-spacer {
  height: $uni-spacing-row-base;
  flex-shrink: 0;
  background: transparent;
}

.empty-view {
  width: 750rpx;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $uni-spacing-row-xxl;
}

.empty-image {
  width: 400rpx;
  height: 394rpx;
}

.empty-text {
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
}

.empty-button {
  width: 300rpx;
  height: 80rpx;
  background: $uni-color-primary;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $uni-border-radius-base;
}
</style>
